$(function() { 

GEOCODE_URL = "http://maps.googleapis.com/maps/api/geocode/json?sensor=true&address=";
MAP_URL = "http://maps.googleapis.com/maps/api/staticmap?zoom={zoom}&size=460x400&maptype=roadmap&sensor=true&centar=";
DIRECTION_URL = "http://maps.googleapis.com/maps/api/directions/json?mode={mode}&origin={myLocation}&destination={destination}&sensor=true";
var oMyLocation = "44.8160429,20.4636531"

var sMesto;

navigator.geolocation.getCurrentPosition(function(position) {
	oMyLocation=position.coords.latitude + "," + position.coords.longitude;
  //alert(position.coords.latitude + ", " + position.coords.longitude);
});


function prikaziPodatke(data) {
  $("ol#lokacije").text("");
  var sMarkers = "";
  jQuery.each(data.routes[0].legs[0].steps, function(i){
  
$("<li>" + this.html_instructions + "</li>")
	.appendTo("ol#lokacije");

  	sMarkers += "&markers=label:" + String.fromCharCode(65+ i) + "|"
			+ this.start_location.lat 
			+ "," + this.start_location.lng;

	});
	var zoom = $("#zoomLevel").val();
	var sMapURL = MAP_URL.replace("{zoom}", zoom);
  $("img#mapa").attr("src", sMapURL + sMesto + "&" + sMarkers);
  /*nContent = $("div[data-Role='content']")[0];
  nContent.style.width = "460px";
  nContent.style.height = "400px";
  nContent.style.backgroundImage = 'url("' + MAP_URL + sMesto + "&" + sMarkers + '")';
  nContent.style.backgroundRepeat = 'no-repeat'
  */
  $("#helpText").hide();
  $("#zoom").show();
}
function prikaziGresku() {
			alert("Mapa trenutno ne moze da se prikaze.");
}

function fnPrikaziMapu() {
			sMesto = 'Serbia Belgrade ' + $("#mesto").val();
			$("#destination").text( $("#mesto").val() );
			var sUrl = DIRECTION_URL.replace("{myLocation}", oMyLocation).replace("{mode}", $("#mode").val());
			sUrl = sUrl.replace("{destination}", sMesto);
			jQuery.ajax({
					url: sUrl,
					dataType: "json",
					success: prikaziPodatke,
					error: prikaziGresku
				});
}


	$("#prikazi").click( fnPrikaziMapu );
	$( "#zoomLevel" ).bind( "change", fnPrikaziMapu);
});